/**
 * @Author: jipeng.Li
 * @Date: 2021-02-24 08:22:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-05-07 09:58:21
 * @Description: 虚拟油卡组件
 */
import React from 'react';
import { Image, ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { fontColorBlack, mainBgColorWhite, px2dp } from '@/styles';
import { fictitiousOilCard, disableOilCard, qrCodeIcon, rightArrowIcon } from '@/images';

const FictitiousOilCard = (props) => {
  const {
    disable, // 是否禁用
    cardClick, // 卡片点击事件
    companyType, // 公司类型
    companyName, // 公司名字
    owner, // 所有人
    btnClick
  } = props;

  function getCardOwnerBackground() {
    return disable ? 'rgba(131, 130, 127, 0.6)' : 'rgba(162, 128, 94, 0.6)';
  }

  return (
    <TouchableOpacity
      activeOpacity={0.7}
      disabled={!cardClick || disable}
      onPress={() => cardClick && cardClick()}
      style={styles.oilCardContainer}
    >
      <ImageBackground
        style={styles.oilCardImage}
        source={disable ? disableOilCard : fictitiousOilCard}
        resizeMode='stretch'
      >
        <View style={styles.oilCardData}>
          <View>
            <View style={styles.oilCardDetails}>
              <View style={styles.oilCardCompany}>
                <Text style={styles.companyType}>{companyType}</Text>
              </View>
              <View style={[styles.oilCardOwner, { backgroundColor: getCardOwnerBackground() }]}>
                <Text style={styles.oilCardOwnerText} numberOfLines={1}>{owner}</Text>
              </View>
            </View>
            <Text style={styles.companyName}>{companyName}</Text>
          </View>
          <View style={styles.oilCardDataBottom}>
            {/* 余额 */}
            <View>
              <Text style={styles.oilCardBalance}>
                <Text style={{ fontSize: px2dp(36), color: mainBgColorWhite }}>挂账卡</Text>
              </Text>
            </View>
          </View>
          <TouchableOpacity style={styles.oilCardBottom} activeOpacity={0.8} onPress={() => btnClick && btnClick()}>
            <Text style={styles.oilCardBottomText}>交易记录</Text>
          </TouchableOpacity>

        </View>
      </ImageBackground>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  oilCardContainer: {},
  oilCardImage: {
    width: px2dp(654),
    height: px2dp(310),
  },
  oilCardData: {
    flex: 1,
    paddingVertical: px2dp(25),
    paddingLeft: px2dp(25),
    // justifyContent: 'space-between',
    overflow: 'hidden',
    borderRadius: px2dp(24)
  },
  oilCardDetails: {
    flexDirection: 'row',
  },
  oilCardCompany: {
    flex: 1,
    flexDirection: 'row',
    height: px2dp(46),
    alignItems: 'center'
  },
  companyType: {
    lineHeight: px2dp(46),
    color: mainBgColorWhite,
    fontSize: px2dp(32),
    fontWeight: 'bold'
  },
  companyName: {
    lineHeight: px2dp(46),
    fontSize: px2dp(26),
    color: mainBgColorWhite,
    opacity: 0.7
  },
  oilCardOwner: {
    alignItems: 'center',
    justifyContent: 'center',
    width: px2dp(120),
    paddingHorizontal: px2dp(10),
    height: px2dp(46),
    borderTopLeftRadius: px2dp(23),
    borderBottomLeftRadius: px2dp(23),
  },
  oilCardOwnerText: {
    color: mainBgColorWhite,
    fontSize: px2dp(24)
  },
  qrCodeContainer: {
    width: px2dp(188),
    height: px2dp(87),
    flexDirection: 'row',
    backgroundColor: 'rgba(206, 173, 141, 0.7)',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: px2dp(10)
  },
  bottomContentContainer: {
    borderBottomLeftRadius: px2dp(27),
    borderBottomRightRadius: px2dp(27),
  },
  oilCardBottomContent: {
    height: px2dp(70),
    borderBottomLeftRadius: px2dp(27),
    borderBottomRightRadius: px2dp(27),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  oilCardBtn: {
    flex: 1,
    height: px2dp(60),
    alignItems: 'center',
    justifyContent: 'center',
  },
  divisionLine: {
    borderLeftWidth: px2dp(1),
    borderLeftColor: '#E6E6E5'
  },
  oilCardBtnText: {
    fontSize: px2dp(26),
    color: mainBgColorWhite
  },
  oilCardBalance: {
    color: mainBgColorWhite,
    fontWeight: 'bold'
  },
  oilCardDataBottom: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    paddingRight: px2dp(25),
    marginTop: px2dp(40),
  },
  qrCodeImage: {
    width: px2dp(52),
    height: px2dp(52)
  },
  qrCodeTextContainer: {
    height: px2dp(52),
    justifyContent: 'space-between'
  },
  qrCodeRight: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  qrCodeText: {
    color: fontColorBlack,
  },
  oilCardBottom: {
    width: px2dp(654),
    height: px2dp(72),
    backgroundColor: 'rgba(0,0,0,0.25)',
    position: 'absolute',
    left: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  oilCardBottomText: {
    fontSize: px2dp(26),
    color: mainBgColorWhite
  }
});

export default FictitiousOilCard;
